<!DOCTYPE html>
<html>
  <head>
    <title>测试Vue的一些模板语法</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3" />
    <meta name="description" content="this is my page" />
    <meta name="content-type" content="text/html; charset=UTF-8" />
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<script src="/js/vue.js"></script>
		<link rel="stylesheet" type="text/css" href="/css/testVue2.css"></link>





  </head>
  
  <body>
    <div id="app">
    	<h1>{{name}}</h1>
		<p>{{test}}</p>
	  <p>{{ message }}</p>
	  <hr></hr>
	  <p>{{5+5}}</p>
	  <p>{{useCondition ? '对':'错'}}</p>	  
	  <p>{{message.split('')}}</p>
	  <p>{{message.split('').reverse().join('')}}</p>
	  <hr></hr>
	  <div v-html="htmlMessage"></div>
	  <div v-bind:id="'list-'+id">测试哈</div>
	  <div v-bind:class="{'class1': useCondition}">	  
	  <h2>测试v-bind</h2>
	  </div>
	  <p v-if="useCondition">测试可见性</p>
	  <p v-if="useCondition"><a v-bind:href="url">这里是测试绑定链接</a></p>
	  <p v-if="!useCondition"><a v-bind:href="url2">这里是测试绑定链接</a></p>
	  
	  	  <button type="button" id ="btn" v-on:click.once="detail()" >{{useCondition}}</button>
	  	  
	  	  <!-- 
	  	  //点击事件将只会触发一次 
		<a v-on:click.once="doThis"></a>
		-->
	  <p>{{message2}}</p>
	  <input v-model="message2"></input>
	
	<p> {{ message3 | capitalize }} </p>
	<p> {{ message4 | capitalize2("第二个参数","第三个参数") }} </p>
</div>
	
	<script>
		var app1 = new Vue({
		  el: '#app',
		  data: {
		    message: 'Hello Vue.js!',
			 test:'test',
			 name:'wch2222',
			 htmlMessage:'<h1>WChengHe 20190306 测试v-html</h1><hr></hr>',
			 useCondition:true,
			 id:1,
			 url:'http://www.baidu.com',
			 url2:'https://www.oschina.net/question/2762359_2191227?sort=default',
			 message2:"双向绑定",
			 message3:"测试自定义过滤器",
			 message4:"测试带参数的"
		  },
		  methods:{
			  detail:function(){
				  this.useCondition = (!this.useCondition);  		
			  }
		  },
		  filters: {
		    capitalize: function (value) {
		      if (!value) return ''
		      value = value.toString()
		      return value.split('').reverse().join('');
		    },
		    capitalize2: function (value,value2,value3) {
		      return value+"-"+value2+"-"+value3;
		    }
		  }
		})
		
		
	</script>
  </body>
</html>
